<!DOCTYPE html>
<html>

<script id="vertex-shader" type="x-shader/x-vertex">

attribute  vec4 vPosition;
attribute  vec4 vColor;
varying vec4 fColor;

//uniform vec3 axis;
//uniform float angle;
uniform vec4 r;

//vec3 angles = radians( theta );

// quaternion multiplier
vec4 multq(vec4 a, vec4 b)
{
   return(vec4(a.x*b.x - dot(a.yzw, b.yzw), a.x*b.yzw+b.x*a.yzw+cross(b.yzw, a.yzw)));
}

// inverse quaternion

vec4 invq(vec4 a)
{
   return(vec4(a.x, -a.yzw)/dot(a,a));
}

void main()
{
  vec4 p;

  //float c = cos(radians(angle)/2.0);
  //float s = sin(radians(angle)/2.0);
  //r = vec4(c, s*axis);

  p = vec4(0.0, vPosition.xyz);  // input point quaternion
  p = multq(r, multq(p, invq(r))); // rotated point quaternion
  gl_Position = vec4( p.yzw, 1.0); // convert back to homogeneous coordinates
  fColor = vColor;
}
</script>
</script>

<script id="fragment-shader" type="x-shader/x-fragment">

precision mediump float;

varying vec4 fColor;

void
main()
{
    gl_FragColor = fColor;
}
</script>

<script type="text/javascript" src="../Common/webgl-utils.js"></script>
<script type="text/javascript" src="../Common/initShaders.js"></script>
<script type="text/javascript" src="../Common/MV.js"></script>
<script type="text/javascript" src="trackballQuaterion.js"></script>

<body>
<canvas id="gl-canvas" width="512"" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>

<br/>

</body>
</html>
